import React, { Component } from 'react'

import FilterFooter from '../FilterFooter'

import styles from './index.module.css'

export default class FilterMore extends Component {
  state = {
    selectdValue: this.props.selectedValues
  }

  spanClickFn = value => {
    const newSelectdValue = [...this.state.selectdValue]
    const flag = newSelectdValue.indexOf(value)

    if(flag !== -1) {
      newSelectdValue.splice(flag, 1)
    } else {
      newSelectdValue.push(value)
    }

    this.setState({
      selectdValue: newSelectdValue
    })
  }

  // 渲染标签
  renderFilters(data) {
    // 高亮类名： styles.tagActive
    return (
      <>
        {
          data.map(item => {
            return  <span onClick={()=>this.spanClickFn(item.value)} key={item.value} className={[styles.tag, this.state.selectdValue.includes(item.value) ? styles.tagActive : ''].join(" ")}>{item.label}</span>
          })
        }
      </>
    )
  }

  onCancel = () => {
    this.setState({
      selectdValue: []
    })
  }

  render() {
    const { roomType, oriented, floor, characteristic } = this.props.data
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <div className={styles.mask} onClick={() => this.props.onCancel(this.props.type, this.state.selectdValue)}/>

        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮 */}
        <FilterFooter onOk={() => this.props.onOk('more', this.state.selectdValue)} onCancel={this.onCancel} className={styles.footer} cancelText={'清除'}/>
      </div>
    )
  }
}
